<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
  <el-page-header style="background-color: #0095d7;
color: white;height: 60px;line-height: 60px;font-weight: bold;" @back="goBack" content="添加商品页面">
  </el-page-header>
  <!--分割线-->
  <el-divider></el-divider>
  <el-card>

    <el-form>
      <el-form-item label="商品标题" label-width="80px">
        <el-input v-model="product.title"></el-input>
      </el-form-item>
      <el-form-item label="现价" label-width="80px">
        <el-input v-model="product.price"></el-input>
      </el-form-item>
      <el-form-item label="原价" label-width="80px">
        <el-input v-model="product.oldPrice"></el-input>
      </el-form-item>
      <el-form-item label="销量" label-width="80px">
        <el-input v-model="product.saleCount"></el-input>
      </el-form-item>
      <el-form-item label="分类" label-width="80px">
        <template>
          <el-select v-model="product.categoryId" placeholder="请选择">
            <el-option v-for="c in categoryArr"
                    :key="c.name"
                    :value="c.id"
                    :label="c.name"
            ></el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="商品图片" label-width="80px">
        <!--选择图片组件开始-->
        <!--limit=1设置只能选择一张图片-->
        <el-upload
                limit="1"
                action="/upload"
                name="picFile"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="handleSuccess"
                :on-exceed="exceed"
                :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <!--选择图片组件结束-->
      </el-form-item>
      <el-form-item>
       <el-button @click="send" type="success">发布商品</el-button>
      </el-form-item>
    </el-form>
  </el-card>

</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
  let v= new Vue({
    el: '#app',
    data: function() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        url:"",
        product:{
          title:"",
          price:"",
          oldPrice:"",
          saleCount:"",
          categoryId:"",
        },
        categoryArr:[],
      }
    },
    created:function(){
      //发请求获取所有分类信息
      axios.get("/category/select").then(function (response){
        v.categoryArr = response.data;
      })
    },
    methods:{

      handleRemove(file, fileList) {
        console.log(file, fileList);
        axios.get("/remove?name=" + file.response).then(function (response) {
          console.log("删除完成!");
          v.url="";
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess(response,file, fileList) {
        //response代表上传成功时服务器返回的图片路径
       v.url=response
      },
      send(){
        //判断是否选择了图片
        if(v.url==""){
          v.$message.error("请选择上传的图片!");
          return;
        }
        //把图片路径添加到product对象中
        v.product.url = v.url;
        //发请求并把所有商品相关数据提交
        axios.post("product/insert",v.product).then(function (){
          //发布完成后跳转会管理页面  传参3-1是为了让管理页面直接显示商品列表
          location.href="/admin.html?index=3-1";
        })
      },
      goBack(){
        history.back();
      },
      exceed(){
        v.$message.error("图片只能选择一个")
      }
    }
  })
</script>
</html>